<template>
	<div id="requireList">
    <el-row :gutter="10" style="padding-bottom: 10px">
      <el-col :span="4" class="flex" style="justify-content: center;align-items: center">
        <span class="nowrap" >状态:</span>

        <el-select size="small" v-model="cashInfo.status" clearable placeholder="全部">
          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flex" style="justify-content: center;align-items: center">
        <span class="nowrap" >用户:</span>


        <el-select size="small" v-model="cashInfo.userId" clearable placeholder="全部">
          <el-option v-for="item in userAsk" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="justify-content: center;align-items: center" class="flex">
        <span class="nowrap">起始时间:</span>

        <div class="block">
          <el-date-picker size="small" style="width: 100%" v-model="cashInfo.beginTime" type="datetime" placeholder="选择日期时间" class="width1">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6" class="flex" style="justify-content: center;align-items: center">
        <span class="nowrap">结束时间:</span>

        <div class="block ">
          <el-date-picker size="small" style="width: 100%" v-model="cashInfo.endTime" type="datetime" placeholder="选择日期时间" class="width1">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="2" class="flex">
        <el-button type="primary" size="small" @click="getCashList()">查询</el-button>
      </el-col>
    </el-row>

		<el-table :data="tableData"  border stripe style="width: 100%" v-loading = 'loading'>
      <el-table-column type="index">
      </el-table-column>
			<el-table-column prop="username" label="用户">
			</el-table-column>
			<el-table-column prop="money" label="提现金额（元）" width="100">
			</el-table-column>
			<el-table-column prop="fee" label="手续费（元)">
			</el-table-column>
			<el-table-column prop="cardPhone" label="手机号" width="130">
			</el-table-column>
      <el-table-column prop="cardBank" label="银行名称" width="120">
      </el-table-column>
			<el-table-column prop="cardNo" label="卡号" width="120">
			</el-table-column>
      <el-table-column prop="remark" label="备注" width="120">
      </el-table-column>
			<el-table-column prop="cardPerson" label="持卡人">
			</el-table-column>
      <el-table-column prop="cardPerson" label="提现确认" width="120">
          <template slot-scope='scope'>
            <el-row style="white-space: nowrap">
              <el-button type="primary" size="mini" @click="tixianSuccess(scope.row.id)">确认</el-button>
              <el-button type="primary" size="mini" @click="tixianFail(scope.row.id)">取消</el-button>
            </el-row>

          </template>
      </el-table-column>
			<el-table-column prop="status" label="处理结果"  width="100">
			</el-table-column>
			<el-table-column prop="createTime" label="申请时间"  width="130" >
			</el-table-column>
			<el-table-column prop="finishTime" label="处理时间" width="130" >
			</el-table-column>
		</el-table>

		<div class="block" style="text-align: right;padding-right: 40px;">

			<el-pagination :current-page.sync="cashInfo.pageNumber" @current-change='handleChange' :page="cashInfo.pageNumber" :page-size="cashInfo.pageSize" layout="total, prev, pager, next" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import dateformat from 'dateformat'
	export default {
		name: "requireList",
		data () {
			return {
				status: [{
						value: 1,
						label: '带处理'
					},
					{
						value: 7,
						label: '成功'
					},
					{
						value: 8,
						label: '失败'
					}
				],
				userAsk: [],
        businessAsk:[],
				cashInfo: {
					userId: '',
					status: '',
					beginTime: '',
					endTime: '',
					pageSize: 10,
					pageNumber: 1
				},
				tableData: [],
				total:1,
        loading:false,
        remark:'',
        successDialogVisible:false
			}
		},
		created() {
			this.getUserList();
			//this.requireCash()
		},
		methods: {
			getUserList() {
				let params = {
					pageSize: this.pageSize,
					pageNumber: this.pageNumber
				}
				this.$api.getUserList(params).then(res => {
					if(res.code == '000000') {
						let mid = res.data.list;
						mid.forEach(item => {
							this.userAsk.push({
								value: item.id,
								label: item.username
							})
						})

					}
				})
			},
			getCashList(mes) {
			  this.loading = true;
				this.cashInfo.beginTime = Date.parse(this.cashInfo.beginTime);
				this.cashInfo.endTime = Date.parse(this.cashInfo.endTime);
        let params = {
          id:this.$route.query.id
        };
        Object.assign(params,this.cashInfo);
        for(let item in params){
          if(params[item] == ''){
            delete params[item];
          }
          if(isNaN(params[item])){
            delete params[item];
          }
        }
        if (mes == 9) {
          this.loading = false;
          if(this.cashInfo.endTime && this.cashInfo.beginTime){
            if (this.cashInfo.endTime - this.cashInfo.beginTime > 86400 * 7 *1000){
              this.$message.error('选择时间不能超过7天')
            }else{
              window.open('/ddj/cash/export?' + this.linkUrlParams(this.orderInfo))
            }
          } else {
            this.$message.info('请选择开始时间和结束时间')
          }
        } else {
          this.$api.getAllCashList(params).then(res => {

            if(res.code == '000000') {
              this.loading = false;
              console.log(res.data);
              this.total=res.data.totalRow;
              this.$message({
                type: "success",
                message: "查询成功"
              })
              this.tableData = res.data.list;
              this.tableData.forEach(item =>{
                if(item.createTime){
                  let date = new Date(item.createTime);
                  item.createTime = dateformat(date,'yyyy-mm-dd HH:MM:ss')
                };
                if(item.finishTime){
                  let date = new Date(item.finishTime);
                  item.finishTime = dateformat(date,'yyyy-mm-dd HH:MM:ss')
                };
                if(item.status && item.status =='1'){
                  item.status = '待处理'
                }
                if(item.status && item.status =='7'){
                  item.status = '成功'
                }
                if(item.status && item.status =='8'){
                  item.status = '失败'
                }
              })
            }

          })
        }

			},
			requireCash() {
				let params = {
					total: 0
				}
				this.$api.requireCash(params).then(res => {
					if(res.code == '000000') {
						console.log(res.data);
						this.$message({
							type: "success",
							message: "申请成功"
						})
					}
				})
			},
      linkUrlParams(obj) {
        let str = ''
        if (typeof obj === 'object') {
          for (let i in  obj) {
            if (obj[i]) {
              str = str + i + '=' + obj[i] + '&'
            }
          }
          let mid = str.split('')
          mid.pop()
          return mid.join('')
        }
      },
      tixianSuccess(id){
        this.$confirm('提现成功，此操作将不可逆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$prompt('备注', '备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            if (!value) {
              value = ''
            }
            this.$api.tixianSuccess(id,{remark:value}).then(res =>{
              if(res.code == '000000'){
                this.$message.success("确认提现成功");
                this.getCashList()
              }
            })
          }).catch(() => { })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })

      },
      tixianFail(id){
        this.$confirm('提现成功，此操作将不可逆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$prompt('备注', '备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            if (!value) {
              value = ''
            }
            this.$api.tixianFail(id,{remark:value}).then(res =>{
              if(res.code == '000000'){
                this.$message.success("取消提现成功");
                this.getCashList()
              }
            })
          }).catch(() => { })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
			handleChange(val){
				this.cashInfo.pageNumber = val;
				this.getCashList()
			}
		}
	}
</script>

<style lang="less">
	#requireList {
		th {
			text-align: center;
		}

		.header {
			padding: 18px 40px;
			font-size: 12px;
			white-space: nowrap;
			display: flex;
			justify-content: center;
		}
		.width1 {
			width: 160px;
		}
    .nowrap{
      padding-right: 6px;
      font-size: 15px;
    }
	}
</style>
